<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">
<script>
    (function () {
        if ('') {
            if (prompt('请输入文章密码') !== '') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("https://google.com"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>








<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="公众号,">










<meta name="description" content="平常我们访问的网站都是由具有公网ip的服务器提供的，如果想做自己的网站也得要有个自己的服务器（当然也可以使用GitHub这种做静态网站，下次可以说说），其实服务器简单来说也就是一台电脑而已，那可不可以将自己的电脑做服务器呢？答案是可以的，这里推荐一个免费的内网穿透神器 ngrok，关于什么是内网穿透看百科解释：12内网穿透，即NAT穿透，网络连接时术语，计算机是局域网内时，外网与内网的计算机节点需">
<meta name="keywords" content="公众号">
<meta property="og:type" content="article">
<meta property="og:title" content="有了内网穿透神器 ngrok ，个人电脑也能做服务器">
<meta property="og:url" content="http://yoursite.com/2019/11/13/有了内网穿透神器-ngrok-，个人电脑也能做服务器/index.html">
<meta property="og:site_name" content="苏生不惑的博客">
<meta property="og:description" content="平常我们访问的网站都是由具有公网ip的服务器提供的，如果想做自己的网站也得要有个自己的服务器（当然也可以使用GitHub这种做静态网站，下次可以说说），其实服务器简单来说也就是一台电脑而已，那可不可以将自己的电脑做服务器呢？答案是可以的，这里推荐一个免费的内网穿透神器 ngrok，关于什么是内网穿透看百科解释：12内网穿透，即NAT穿透，网络连接时术语，计算机是局域网内时，外网与内网的计算机节点需">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-70805f3d1c6b55ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-55dc4a9b78e2db98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-b3a0bcc466935020.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-c64e89beddc0d720.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-74ac92b008b96aff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-69b171ad5ed9e2be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-24700a4c6aeaef09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-2300d3cdff1ee344.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-df98b3ee658970e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-8d3abc9cfa938cc3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-d627b00a45e6fabd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-fa763483ad418530.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-0a166ed2a0b75945.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-7f882e0650ddf327.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-3f69052735fff028.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-98a2063b489f779f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-2b7df113abb196e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-e5a622655bb1922c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-9a67f90418917111.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-1f48e99a548ce581.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-8ff6e00de5b0726e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-6e0079f95d4c0338.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:image" content="https://upload-images.jianshu.io/upload_images/17817191-3d3d7b3fb0e68d0d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
<meta property="og:updated_time" content="2019-11-13T11:41:18.635Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="有了内网穿透神器 ngrok ，个人电脑也能做服务器">
<meta name="twitter:description" content="平常我们访问的网站都是由具有公网ip的服务器提供的，如果想做自己的网站也得要有个自己的服务器（当然也可以使用GitHub这种做静态网站，下次可以说说），其实服务器简单来说也就是一台电脑而已，那可不可以将自己的电脑做服务器呢？答案是可以的，这里推荐一个免费的内网穿透神器 ngrok，关于什么是内网穿透看百科解释：12内网穿透，即NAT穿透，网络连接时术语，计算机是局域网内时，外网与内网的计算机节点需">
<meta name="twitter:image" content="https://upload-images.jianshu.io/upload_images/17817191-70805f3d1c6b55ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2019/11/13/有了内网穿透神器-ngrok-，个人电脑也能做服务器/">



<meta name="referrer" content="never"> ​​​​


  <title>有了内网穿透神器 ngrok ，个人电脑也能做服务器 | 苏生不惑的博客</title>
  








</head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">苏生不惑的博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br>
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2019/11/13/有了内网穿透神器-ngrok-，个人电脑也能做服务器/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="苏生不惑">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="苏生不惑的博客">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">有了内网穿透神器 ngrok ，个人电脑也能做服务器</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-11-13T19:40:10+08:00">
                2019-11-13
              </time>
            

            

            
          </span>

          

          
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>次
            </span>
          

          
            <div class="post-wordcount">
              
                
                  <span class="post-meta-divider">|</span>
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2.1k 字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  8 分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>平常我们访问的网站都是由具有公网ip的服务器提供的，如果想做自己的网站也得要有个自己的服务器（当然也可以使用GitHub这种做静态网站，下次可以说说），其实服务器简单来说也就是一台电脑而已，那可不可以将自己的电脑做服务器呢？答案是可以的，这里推荐一个免费的内网穿透神器 <code>ngrok</code>，关于什么是内网穿透看百科解释：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">内网穿透，即NAT穿透，网络连接时术语，计算机是局域网内时，</span><br><span class="line">外网与内网的计算机节点需要连接通信，映射端口能让外网的电脑找到处于内网的电脑，提高下载速度。</span><br></pre></td></tr></table></figure></p>
<p>简单来说就是通过ngrok 可以生成一个外网地址，然后找到到本地服务器就可以访问自己电脑的文件，具体如何使用ngrok内网穿透如下，非常简单。</p>
<h3 id="搭建本地服务器"><a href="#搭建本地服务器" class="headerlink" title="搭建本地服务器"></a>搭建本地服务器</h3><p>首先在自己电脑新建一个文件 index.html ，内容自己随意写了，然后搭建一个简单的服务器，可以通过ip和端口访问到这个文件。</p>
<p>比如我本机装了php，执行一行命令就可以 。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">php -S localhost:<span class="number">4000</span></span><br></pre></td></tr></table></figure></p>
<p>然后浏览器打开 localhost:4000 就能访问到本地的文件 index.html，这是一个周杰伦的个人PPT介绍，空格键翻页，和平常使用的PPT一样。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-70805f3d1c6b55ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p>python 也是一样的。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">λ python -m http.server <span class="number">4000</span></span><br><span class="line">Serving HTTP on <span class="number">0.0</span><span class="number">.0</span><span class="number">.0</span> port <span class="number">8000</span> (http:<span class="comment">//0.0.0.0:4000/) ...</span></span><br></pre></td></tr></table></figure></p>
<p>如果对命令行不熟悉直接安装个软件NGINX  <a href="https://www.nginx.com/" target="_blank" rel="noopener">https://www.nginx.com/</a> 直接启动就行。</p>
<h3 id="ngrok"><a href="#ngrok" class="headerlink" title="ngrok"></a>ngrok</h3><p> ngrok软件官网 <a href="https://dashboard.ngrok.com/get-started" target="_blank" rel="noopener">https://dashboard.ngrok.com/get-started</a><br><img src="https://upload-images.jianshu.io/upload_images/17817191-55dc4a9b78e2db98.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>我用谷歌账号直接登录，也可以自己用邮箱注册，然后copy 自己的token。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-b3a0bcc466935020.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>下载软件（对应自己的电脑系统）到本地后，在cmd命令行执行<code>ngrok authtoken 1THs9sajgDwQV1RS5ER6pc6nHo2_7gVJGSiAzT91YpAiS7f54</code><br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"># ngrok authtoken 1THs9sajgDwQV1RS5ER6pc6nHo2_7gVJGSiAzT91YpAiS7f54</span><br><span class="line">Authtoken saved to configuration file: C:\Users\xx/.ngrok2/ngrok.yml</span><br><span class="line">ngrok by @inconshreveable                                                              (Ctrl+C to quit)</span><br><span class="line"></span><br><span class="line">Session Status                online</span><br><span class="line">Account                        (Plan: Free)</span><br><span class="line">Version                       <span class="number">2.3</span><span class="number">.35</span></span><br><span class="line">Region                        United States (us)</span><br><span class="line">Web Interface                 http:<span class="comment">//127.0.0.1:4040</span></span><br><span class="line">Forwarding                    http:<span class="comment">//7ef9b347.ngrok.io -&gt; http://localhost:4000</span></span><br><span class="line">Forwarding                    https:<span class="comment">//7ef9b347.ngrok.io -&gt; http://localhost:4000</span></span><br><span class="line"></span><br><span class="line">Connections                   ttl     opn     rt1     rt5     p50     p90</span><br><span class="line">                              <span class="number">0</span>       <span class="number">0</span>       <span class="number">0.00</span>    <span class="number">0.00</span>    <span class="number">0.00</span>    <span class="number">0.00</span></span><br></pre></td></tr></table></figure></p>
<p>浏览器打开<a href="http://7ef9b347.ngrok.io" target="_blank" rel="noopener">http://7ef9b347.ngrok.io</a> 就可以打开自己电脑的文件 index.html，同样可以在命令行中可以看到访问到的文件。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-c64e89beddc0d720.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>效果如图<br><img src="https://upload-images.jianshu.io/upload_images/17817191-74ac92b008b96aff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p>命令行中的 Web Interface 是 Ngrok 内置的一个管理面板，用来展示所有通过 Ngrok 进来的请求信息以及返回的数据，现在我们访问一下 <a href="http://127.0.0.1:4040" target="_blank" rel="noopener">http://127.0.0.1:4040</a> 看看。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-69b171ad5ed9e2be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p>现在你有了一个自己的域名<a href="http://7ef9b347.ngrok.io" target="_blank" rel="noopener">http://7ef9b347.ngrok.io</a> ，发给别人也能访问了，不过你的电脑不能关机，是不很简单，不过这个国外服务器有点慢，可以考虑国内的ngrok.cc。</p>
<h3 id="ngrok-cc"><a href="#ngrok-cc" class="headerlink" title="ngrok.cc"></a>ngrok.cc</h3><p>用邮箱注册 <a href="https://www.ngrok.cc/user.html" target="_blank" rel="noopener">https://www.ngrok.cc/user.html</a>   ，详细教程见 <a href="http://www.ngrok.cc/_book/" target="_blank" rel="noopener">http://www.ngrok.cc/_book/</a> 这个也是免费的。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-24700a4c6aeaef09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>购买免费版本，然后设置基本信息，如果需要可以设置需要密码访问。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-2300d3cdff1ee344.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br><img src="https://upload-images.jianshu.io/upload_images/17817191-df98b3ee658970e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>下载对应系统的软件<a href="https://www.ngrok.cc/download.html，配置文件设置好你要的域名，比如我的susheng，Windows下直接启动文件" target="_blank" rel="noopener">https://www.ngrok.cc/download.html，配置文件设置好你要的域名，比如我的susheng，Windows下直接启动文件</a> <code>Sunny-Ngrok启动工具.bat</code> 然后输入隧道id c4237a7e0be3bdad（登录后在隧道管理中复制）<br><img src="https://upload-images.jianshu.io/upload_images/17817191-8d3abc9cfa938cc3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p><img src="https://upload-images.jianshu.io/upload_images/17817191-d627b00a45e6fabd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>浏览器访问 <a href="http://susheng.free.idcfengye.com" target="_blank" rel="noopener">http://susheng.free.idcfengye.com</a> 就可以了，很简单吧。</p>
<p><a href="https://nat.cdjxt.net/#section-home" target="_blank" rel="noopener">https://nat.cdjxt.net/#section-home</a> 这个和 ngrok.cc 类似 ，先下载客户端，配置教程见  <a href="https://nat.cdjxt.net/#section-pricing" target="_blank" rel="noopener">https://nat.cdjxt.net/#section-pricing</a>  ，然后用邮箱直接注册<br><img src="https://upload-images.jianshu.io/upload_images/17817191-fa763483ad418530.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br><img src="https://upload-images.jianshu.io/upload_images/17817191-0a166ed2a0b75945.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>命令行执行<code>client_windows_amd64.exe -s jp.cdjxt.net -p 5993 -k 9e9ef6b89342454f9c554d83a2a94b8e -ssl true</code>可以看到运行成功了。<br><img src="https://upload-images.jianshu.io/upload_images/17817191-7f882e0650ddf327.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p><img src="https://upload-images.jianshu.io/upload_images/17817191-3f69052735fff028.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>浏览器访问 <a href="https://m30059.jp.cdjxt.net/#/start" target="_blank" rel="noopener">https://m30059.jp.cdjxt.net/#/start</a>   看效果。</p>
<p>如果嫌装客户端麻烦，可以直接使用这个serveo</p>
<h3 id="serveo"><a href="#serveo" class="headerlink" title="serveo"></a>serveo</h3><p><a href="https://serveo.net/" target="_blank" rel="noopener">https://serveo.net/</a> 只要在命令行执行一行命令（需要先安装ssh命令，可以直接装一个git bash就行）<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">ssh -R <span class="number">80</span>:localhost:<span class="number">4000</span> serveo.net</span><br><span class="line">Forwarding HTTP traffic <span class="keyword">from</span> https:<span class="comment">//habeo.serveo.net</span></span><br><span class="line">Press g to start a GUI session and ctrl-c to quit.</span><br></pre></td></tr></table></figure></p>
<p><img src="https://upload-images.jianshu.io/upload_images/17817191-98a2063b489f779f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>浏览器访问  <a href="https://habeo.serveo.net" target="_blank" rel="noopener">https://habeo.serveo.net</a> 就能访问到自己电脑的文件了。</p>
<p>现在有了内网穿透你出门在外也可以访问到自己电脑上的文件了（当然你的电脑不能关机），如果还是嫌内网穿透麻烦，还不稳定，还是建议买个自己的服务器，这里推荐下腾讯云的，一年只要88 <a href="https://cloud.tencent.com/act/double11" target="_blank" rel="noopener">https://cloud.tencent.com/act/double11</a> ，昨天双十一我刚买了一台（如果是老用户，用一个新微信注册绑定同一个身份证就行），非广告，腾讯也没给我广告费。</p>
<p><img src="https://upload-images.jianshu.io/upload_images/17817191-2b7df113abb196e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br><img src="https://upload-images.jianshu.io/upload_images/17817191-e5a622655bb1922c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p><img src="https://upload-images.jianshu.io/upload_images/17817191-9a67f90418917111.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br><img src="https://upload-images.jianshu.io/upload_images/17817191-1f48e99a548ce581.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p>
<p>推荐阅读:</p>
<p><a href="https://mp.weixin.qq.com/s/Xz1m-mqtCcBF_4hmGCpkUQ" target="_blank" rel="noopener">如何发一条空白的朋友圈</a></p>
<p><a href="https://mp.weixin.qq.com/s/NYrs5cluZgjvm85MXmiaKA" target="_blank" rel="noopener">那些在国内还能使用的谷歌产品</a></p>
<p><a href="https://mp.weixin.qq.com/s/eGDO0Y8el_dsEyriCoAgog" target="_blank" rel="noopener">那些你可能不知道的微信奇技淫巧</a></p>
<p><a href="https://mp.weixin.qq.com/s/k5lBwiDzGgSU3fh2v2Rw9A" target="_blank" rel="noopener">如何在豆瓣租房小组快速找到满意的房子</a></p>
<p><a href="https://mp.weixin.qq.com/s/iL6WyI-TChtjZMuu5G5W8A" target="_blank" rel="noopener">公众号苏生不惑原创文章整理</a></p>
<p><a href="https://mp.weixin.qq.com/s/RWxn4_Qg_Z3bL4wKusndKA" target="_blank" rel="noopener">不会写Python代码如何抓取豆瓣电影 Top 250</a></p>
<p><a href="https://mp.weixin.qq.com/s/whcZis69KnIzEUVMtrjdmA" target="_blank" rel="noopener">Python 词云分析周杰伦新歌《说好不哭》</a></p>
<p><a href="https://mp.weixin.qq.com/s/LKDGKWi62J5Zyzh3rB-IiQ" target="_blank" rel="noopener">跟随时光机回到过去看看 2005 年的百度/腾讯/淘宝/谷歌</a></p>
<p><img src="https://upload-images.jianshu.io/upload_images/17817191-8ff6e00de5b0726e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="免费星球"></p>
<h3 id="公众号：苏生不惑"><a href="#公众号：苏生不惑" class="headerlink" title="公众号：苏生不惑"></a>公众号：苏生不惑</h3><p> <img src="https://upload-images.jianshu.io/upload_images/17817191-6e0079f95d4c0338.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="扫描二维码关注或搜索微信susheng_buhuo"></p>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><p>Mac 安装使用 Ngrok <a href="https://learnku.com/articles/36129" target="_blank" rel="noopener">https://learnku.com/articles/36129</a><br>内网穿透神器 Ngrok 的使用<a href="https://learnku.com/articles/36003" target="_blank" rel="noopener">https://learnku.com/articles/36003</a><br><a href="https://www.jianshu.com/p/33d0a8f77961" target="_blank" rel="noopener">https://www.jianshu.com/p/33d0a8f77961</a><br><a href="https://www.cpolar.com/" target="_blank" rel="noopener">https://www.cpolar.com/</a><br><a href="https://learnku.com/articles/36129#reply116370" target="_blank" rel="noopener">https://learnku.com/articles/36129#reply116370</a><br>可以实现内网穿透的几款工具<a href="https://my.oschina.net/ZL520/blog/2086061" target="_blank" rel="noopener">https://my.oschina.net/ZL520/blog/2086061</a><br>Ngrok Natapp 小米球 Sunny-Ngrok echosite Ssh、autossh Lanproxy Spike frp fcn 花生壳<br>内网穿透多款工具测试 <a href="https://hacpai.com/article/1568482350815" target="_blank" rel="noopener">https://hacpai.com/article/1568482350815</a><br>内网穿透工具浅评 <a href="https://www.v2ex.com/t/575865" target="_blank" rel="noopener">https://www.v2ex.com/t/575865</a><br>smarGate： <a href="https://github.com/lazy-luo/smarGate" target="_blank" rel="noopener">https://github.com/lazy-luo/smarGate</a><br>Frp： <a href="https://github.com/fatedier/frp" target="_blank" rel="noopener">https://github.com/fatedier/frp</a><br>Ngrok： <a href="https://github.com/inconshreveable/ngrok" target="_blank" rel="noopener">https://github.com/inconshreveable/ngrok</a><br><a href="https://github.com/cnlh/nps/" target="_blank" rel="noopener">https://github.com/cnlh/nps/</a><br>有哪些简单实用的端口映射（内网穿透）软件工具？<a href="https://www.zhihu.com/question/49629610" target="_blank" rel="noopener">https://www.zhihu.com/question/49629610</a><br><a href="https://qydev.com/download.html" target="_blank" rel="noopener">https://qydev.com/download.html</a> ngork <a href="http://help.qydev.com/1242213" target="_blank" rel="noopener">http://help.qydev.com/1242213</a><br>量子互联<a href="https://www.nsloop.com/" target="_blank" rel="noopener">https://www.nsloop.com/</a><br>内网穿透新章法 serveo<a href="https://hacpai.com/article/1564394400425" target="_blank" rel="noopener">https://hacpai.com/article/1564394400425</a><br><a href="https://www.moerats.com/Aria2/#!/downloading" target="_blank" rel="noopener">https://www.moerats.com/Aria2/#!/downloading</a><br><a href="https://hacpai.com/article/1568482350815" target="_blank" rel="noopener">https://hacpai.com/article/1568482350815</a>   <a href="https://cloud.tencent.com/developer/article/1507091" target="_blank" rel="noopener">https://cloud.tencent.com/developer/article/1507091</a><br><a href="https://github.com/fatedier/frp/blob/master/README_zh.md" target="_blank" rel="noopener">https://github.com/fatedier/frp/blob/master/README_zh.md</a><br>frp <a href="https://www.hi-linux.com/posts/25686.html" target="_blank" rel="noopener">https://www.hi-linux.com/posts/25686.html</a>  <a href="https://natapp.cn/" target="_blank" rel="noopener">https://natapp.cn/</a><br><a href="https://github.com/ffay/lanproxy" target="_blank" rel="noopener">https://github.com/ffay/lanproxy</a><br><a href="https://juejin.im/post/5cad5e675188251b1b2f5517" target="_blank" rel="noopener">https://juejin.im/post/5cad5e675188251b1b2f5517</a><br><a href="https://manager.xiaomiqiu.com/index" target="_blank" rel="noopener">https://manager.xiaomiqiu.com/index</a><br><img src="https://upload-images.jianshu.io/upload_images/17817191-3d3d7b3fb0e68d0d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"><br>如果没有服务器的话推荐个免费的 <a href="https://www.natfrp.com/" target="_blank" rel="noopener">https://www.natfrp.com/</a><br>内网穿透工具(替代 ngrok 和花生壳) <a href="https://github.com/longshengwang/tcpthrough-server" target="_blank" rel="noopener">https://github.com/longshengwang/tcpthrough-server</a><br>FCN 一键免费穿透，日常维护管理基本够用了<a href="https://cn.v2ex.com/t/617484#reply86" target="_blank" rel="noopener">https://cn.v2ex.com/t/617484#reply86</a><br> ssh -R 20001:localhost:80 <a href="mailto:root@a.a.a.a" target="_blank" rel="noopener">root@a.a.a.a</a> 或者 autossh -p22 -M 5000 -NR 20001:0.0.0.0:80 <a href="mailto:root@a.a.a.a" target="_blank" rel="noopener">root@a.a.a.a</a>，autossh 会一直尝试重新连接 可以消除网络故障隐患，ssh 透传的缺陷是透传到外网的端口只能监听 127<br> zerotier，非常好用的内网穿透方案，可以把多个内网机器组一个局域网，然后使用一个有公网IP的机器或者vps做中转节点(moon)进行加速，这样就把多个内网机器+一个公网机器组成了一个本地局域网: <a href="https://jiajunhuang.com/sharing#250" target="_blank" rel="noopener">https://jiajunhuang.com/sharing#250</a> 亲爱的小伙伴：<br> <a href="https://www.cnblogs.com/along21/p/8384304.html" target="_blank" rel="noopener">超好用内网映射神器</a><br> 免费的内网穿透服务，轻松在自家电脑搭建网站 <a href="https://www.natfrp.com/" target="_blank" rel="noopener">https://www.natfrp.com/</a><br>十分钟快速搭建内网穿透工具 —— frp <a href="https://gleehub.com/tool/%E5%8D%81%E5%88%86%E9%92%9F%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F%E5%B7%A5%E5%85%B7%20%E2%80%94%E2%80%94%20frp.html" target="_blank" rel="noopener">https://gleehub.com/tool/%E5%8D%81%E5%88%86%E9%92%9F%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F%E5%B7%A5%E5%85%B7%20%E2%80%94%E2%80%94%20frp.html</a><br>( <a href="https://www.natfrp.org/" target="_blank" rel="noopener">https://www.natfrp.org/</a>) 是一个免费的内网穿透平台<br>Frp内网穿透<a href="https://www.yangchong.top/2019/03/13/Frp%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/" target="_blank" rel="noopener">https://www.yangchong.top/2019/03/13/Frp%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/</a><br>nps是一款轻量级、高性能、功能强大的内网穿透代理服务器。目前支持tcp、udp流量转发 <a href="https://github.com/cnlh/nps" target="_blank" rel="noopener">https://github.com/cnlh/nps</a><br>内网穿透 <a href="https://github.com/txthinking/mr2" target="_blank" rel="noopener">https://github.com/txthinking/mr2</a><br>Fcn 傻瓜式内网穿透软件<br><a href="https://github.com/boywhp/fcn" target="_blank" rel="noopener">https://github.com/boywhp/fcn</a>  <a href="https://syncthing.net/" target="_blank" rel="noopener">https://syncthing.net/</a><br><a href="https://github.com/ssstk/cngrok" target="_blank" rel="noopener">https://github.com/ssstk/cngrok</a><br>比 frp 更好用的内网穿透工具 nps<a href="https://github.com/cnlh/nps" target="_blank" rel="noopener">https://github.com/cnlh/nps</a>  <a href="https://github.com/KunTengRom/xfrp" target="_blank" rel="noopener">https://github.com/KunTengRom/xfrp</a> <a href="https://nps.hanxi.info/login/register" target="_blank" rel="noopener">https://nps.hanxi.info/login/register</a> frp 也有人写了面板 <a href="https://www.natfrp.org/" target="_blank" rel="noopener">https://www.natfrp.org/</a><br>nps<br><a href="http://nav.xiejiahe.com/#/index?page=3" target="_blank" rel="noopener">http://nav.xiejiahe.com/#/index?page=3</a><br>我安利一个比较偏门，偏开发者的应用，内网穿透，<a href="http://www.notr.tech" target="_blank" rel="noopener">http://www.notr.tech</a> 。一条命令搞定。</p>
<p>内置免费 mr2 服务器, 将本地服务器暴露在外网 npm install -g @txthinking/mr2 <a href="https://www.v2ex.com/t/568236#reply25" target="_blank" rel="noopener">https://www.v2ex.com/t/568236#reply25</a> <a href="https://github.com/txthinking/mr2" target="_blank" rel="noopener">https://github.com/txthinking/mr2</a></p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/公众号/" rel="tag"># 公众号</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/11/11/比谷歌更有意思的知识提取搜索引擎-magi/" rel="next" title="比谷歌更有意思的知识提取搜索引擎 magi">
                <i class="fa fa-chevron-left"></i> 比谷歌更有意思的知识提取搜索引擎 magi
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/11/20/php-开发记录/" rel="prev" title="php 开发记录">
                php 开发记录 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
          <div class="comments" id="comments">
             <div id="gitment-container"></div>
         </div>
  




        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">苏生不惑</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">382</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">37</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/sushengbuhuo" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mysusheng@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://plus.google.com/mysusheng" target="_blank" title="Google">
                      
                        <i class="fa fa-fw fa-google"></i>Google</a>
                  </span>
                
            </div>
          

          
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-block">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                Links
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="http://v2ex.com/" title="v2ex" target="_blank">v2ex</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.fanhaobai.com/" title="fanhaobai" target="_blank">fanhaobai</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://yuanxuxu.com/archives/" title="yuanxuxu" target="_blank">yuanxuxu</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.snail-c.cn/article" title="snail-c" target="_blank">snail-c</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://showcj.com/archives" title="showcj" target="_blank">showcj</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://vultr.aicnm.com/%E6%9C%80%E6%96%B0Vultr%E6%B3%A8%E5%86%8C%E5%8F%8AVPS%E8%B4%AD%E4%B9%B0%E5%9B%BE%E6%96%87%E6%95%99%E7%A8%8B/" title="vultr" target="_blank">vultr</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.lucissfer.com/" title="lucissfer" target="_blank">lucissfer</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://blog.csdn.net/fdipzone/article/details/79352685" title="傲雪星枫" target="_blank">傲雪星枫</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.yoby123.cn/index.php/category/default/" title="小白的分享" target="_blank">小白的分享</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.cnblogs.com/52fhy/p/5819995.html" title="PHP攻城狮" target="_blank">PHP攻城狮</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://blog.jiaojie.site/" title="php" target="_blank">php</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://sphard.com/archives/" title="sphard" target="_blank">sphard</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://yuanxuxu.com/archives/" title="LNMP技术栈笔记" target="_blank">LNMP技术栈笔记</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.coding10.com/" title="学习 Laravel" target="_blank">学习 Laravel</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://shuwoom.com/?page_id=929" title="区块链学习指南" target="_blank">区块链学习指南</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://greenlightt.github.io/archives/" title="greenlightt" target="_blank">greenlightt</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.0php.net/archives/" title="0php" target="_blank">0php</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.fordba.com/category/mysql" title="mysql" target="_blank">mysql</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.itcodemonkey.com/" title="程序员" target="_blank">程序员</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.yanshuo.me/r/v2ex" title="言说" target="_blank">言说</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.timiguo.com/archive.html" title="提米果的博客" target="_blank">提米果的博客</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://phpartisan.cn/news/112.html" title="phpartisan" target="_blank">phpartisan</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.cnblogs.com/52fhy/" title="飞鸿影" target="_blank">飞鸿影</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="http://www.54php.cn/" title="54php" target="_blank">54php</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.lazyman.vip/" title="营销" target="_blank">营销</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.njphper.com/archives/" title="做人呢最重要的就是开心" target="_blank">做人呢最重要的就是开心</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://www.h57.pw/" title="php 初心者" target="_blank">php 初心者</a>
                  </li>
                
              </ul>
            </div>
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#搭建本地服务器"><span class="nav-number">1.</span> <span class="nav-text">搭建本地服务器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ngrok"><span class="nav-number">2.</span> <span class="nav-text">ngrok</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#ngrok-cc"><span class="nav-number">3.</span> <span class="nav-text">ngrok.cc</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#serveo"><span class="nav-number">4.</span> <span class="nav-text">serveo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#公众号：苏生不惑"><span class="nav-number">5.</span> <span class="nav-text">公众号：苏生不惑</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他"><span class="nav-number">6.</span> <span class="nav-text">其他</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<div class="copyright">&copy; <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">苏生不惑</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>



<div>
<span id="showDays"></span>

</div>

<span id="busuanzi_container_site_pv">
   总访问量:<span id="busuanzi_value_site_pv"></span>次
</span>



  <span class="post-meta-divider">|</span>



<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共773.8k字</span>
</div>
<script>
var birthDay = new Date("11/20/2018");
var now = new Date();
var duration = now.getTime() - birthDay.getTime();
var total= Math.floor(duration / (1000 * 60 * 60 * 24));
document.getElementById("showDays").innerHTML = "本站已运行 "+total+" 天";
</script>

        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      人次
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      次
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  











<script type="text/javascript">
    (function() {
        // 匿名函数，防止污染全局变量
        var utterances = document.createElement('script');
        utterances.type = 'text/javascript';
        utterances.async = true;
        utterances.setAttribute('issue-term','0')
        utterances.setAttribute('theme','')
        utterances.setAttribute('repo','sushengbuhuo/laravel_ioc_demo')
        utterances.crossorigin = 'anonymous';
        utterances.src = 'https://utteranc.es/client.js';
        // content 是要插入评论的地方
        document.getElementById('gitment-container').appendChild(utterances);
    })();
</script>


  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  

  
  

  

  

  

  
<script>
  ((window.gitter = {}).chat = {}).options = {
    //room替换成自己的聊天室名称即可，room的名称规则是：username/roomname
    room: 'sushengbuhuo-chat/mychat'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

</body>
</html>
